import { View, Image, Text } from "@tarojs/components";
import { useEffect, useState } from "react";

import { useRouter } from "@tarojs/taro";
import { requestShopDetail } from "@/utils/api";

import "./index.scss";

const ShoppDteil = () => {
  const [shopp, setShopp] = useState({});
  const router = useRouter();
  console.log(router.params.id);
  const id = parseInt(router.params.id);
  useEffect(() => {
    requestShopDetail({ id }).then((res) => setShopp(res.data.data));
    return () => {};
  }, []);

  return (
    <View className="detail">
      <View className="top_img">
        <Image src={shopp.imgUrl} />
      </View>
      <View className="top_title">
        <Text>{shopp.title}</Text>
        <Text>￥{shopp.price}</Text>
      </View>
      <View className="zjgm">
        <View className="title">
          <Text>最近购买</Text>
          <Text>全部 ></Text>
        </View>
        {shopp.detail &&
          shopp.detail.gms.map((item) => (
            <View key={item.name} className='zj_item'>
              <Text className="name">{item.name}</Text>
              <Text className="size">{item.size}</Text>
              <Text className="parice">￥{item.trading}</Text>
              <Text className="time">{item.pay_time}</Text>
            </View>
          ))}
        <View className="zyxz">
          <Text className="top_txt">注意须知</Text>
          <Text className="desc">{shopp.detail && shopp.detail.decs}</Text>
        </View>
        <View className="shoppintr">
          <Text className="top_intr">商品详情</Text>
          <Text className="intr_desc">
            {shopp.detail && shopp.detail.descms}
          </Text>
        </View>
        <View className="imgs">
          <Text className="show_shopp">商品展示</Text>
          {shopp.detail &&
            shopp.detail.imgs.map((item) => (
              <View className="show_img" key={item.id}>
                <Image src={item.imgUrl} />
              </View>
            ))}
        </View>
      </View>
      <View className="purchase">
        <Text className='pay_txt'>立即购买</Text>
      </View>
    </View>
  );
};

export default ShoppDteil;
